<template>
  <view class="brand-manage-page">
    <view class="top-fixed">
      <view class="top-search clearfix">
        <u-icon name="search" size="32" color="#999"></u-icon>
        <!-- <image
          class="icon-search"
          src="../../static/img/search.png"
          mode="aspectFit"
        ></image> -->
        <input
          class="top-input"
          confirm-type="search"
          placeholder-class="input-pl"
          placeholder="品牌名称、编码、主营产品"
          type="text"
          v-model="keyWord"
          @confirm="searchData"
        />
        <!-- <image
          class="icon-close"
          src="../../static/img/icon-close.png"
          mode="aspectFit"
        ></image> -->
        <u-icon
          name="close"
          size="24"
          color="#999"
          v-show="keyWord"
          @click="clearKeyword"
        ></u-icon>
      </view>
    </view>
    <view class="container-view">
      <scroll-view
        :lower-threshold="42"
        scroll-y
        class="con-right"
        @scrolltolower="scrollLoading"
      >
        <view
          class="goods-item clearfix"
          v-for="(item, index) in brand_list"
          :key="item.id"
          @click="lookDetail(item)"
        >
          <view
            class="float_left sel-view"
            @click.stop="lookDetail(item)"
            v-if="source === 2"
          >
            <i class="ibonfont ibonxuanze" v-if="!item.checked"></i>
            <i class="ibonfont ibonxuanze_xuanzhong" v-else></i>
          </view>
          <view class="float_left goods-img">
            <image :src="item.images" mode="aspectFill"></image>
          </view>
          <view class="float_left goods-cont-right">
            <view class="goods-tit ellipsis">{{ item.title }}</view>
            <view class="goods-info">
              <text class="gi-label">编号：</text>
              <text class="gi-value">{{ item.code }}</text>
            </view>
            <view class="goods-info">
              <text class="gi-label">商品数量：</text>
              <text class="gi-value">{{ item.goodsBasicTotal || 0 }}</text>
            </view>
            <view class="goods-info">
              <text class="gi-label">状态：</text>
              <text
                class="gi-value"
                :class="item.enableStatus === 5 ? 'status-on' : 'status-off'"
              >
                {{ item.enableStatus === 5 ? "启用" : "禁用" }}
              </text>
            </view>
            <view class="goods-info">
              <text class="gi-label">排序：</text>
              <text class="gi-value">{{ item.sort }}</text>
            </view>
          </view>
        </view>
        <view v-if="loading_status === 'loading'" class="load-more"
          >加载中...</view
        >
        <view v-else-if="loading_status === 'noMore'" class="load-more"
          >没有更多了</view
        >
      </scroll-view>
    </view>
    <!-- 替换uni-popup为自定义弹窗 -->
    <view v-if="showModel" class="custom-popup-mask" @click="closeDetail">
      <view class="brandDetail custom-popup" @click.stop>
        <view class="brand-top-view clearfix">
          <view class="brand-logo float_left"
            ><image :src="detail_data.images" mode="aspectFill"></image
          ></view>
          <view class="brand-info">
            <view class="brand-name">{{ detail_data.title }}</view>
            <view class="brand-info-i">
              <text>编号：{{ detail_data.code }}</text>
            </view>
          </view>
        </view>
        <view class="detail-info">
          <view class="detail-li clearfix">
            <view class="float_left detail-label">商品数量</view>
            <view class="float_right detail-value">{{
              detail_data.goodsBasicTotal || 0
            }}</view>
          </view>
          <view class="detail-li clearfix">
            <view class="float_left detail-label">状态</view>
            <view
              class="float_right detail-value"
              :class="
                detail_data.enableStatus === 5 ? 'status-on' : 'status-off'
              "
            >
              {{ detail_data.enableStatus === 5 ? "启用" : "禁用" }}
            </view>
          </view>
          <view class="detail-li clearfix">
            <view class="float_left detail-label">排序</view>
            <view class="float_right detail-value">{{ detail_data.sort }}</view>
          </view>
          <view class="detail-li">
            <view class="detail-label">关联供应商</view>
            <view class="detail-value clearfix">
              <text
                class="tag-li float_left"
                v-for="(item, index) in detail_data.supplierTitle"
                :key="index"
                >{{ item }}</text
              >
            </view>
          </view>
        </view>
        <view class="handel-view">
          <block v-if="$accessCheck($Access.BrandManageUpdateBrandStatus)">
            <view
              class="btn-li dis-btn"
              v-if="detail_data.enableStatus === 4"
              @click="updateBrand(detail_data)"
            >
              <i class="ibonfont ibonqiyong"></i>
              启用
            </view>
            <view
              class="btn-li dis-btn"
              v-else
              @click="updateBrand(detail_data)"
            >
              <i class="ibonfont ibonjinyong"></i>
              禁用
            </view>
          </block>
          <view
            class="btn-li del-btn"
            @click="deleteBrand(detail_data.id)"
            v-if="$accessCheck($Access.BrandManageDelBrand)"
          >
            <i class="ibonfont ibonshanchu"></i>
            删除
          </view>
          <view
            class="btn-li"
            @click="editData(detail_data.id)"
            v-if="
              $accessCheck($Access.BrandManageEditBrand) ||
              $accessCheck($Access.BrandManageGetBrandInfoById)
            "
          >
            <i class="ibonfont ibonbianji"></i>
            编辑
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-bottom" v-if="source === 2">
      <button class="sub-btn" type="primary" @click="selConfirm">确定</button>
    </view>
    <!-- 替换addBtn为自定义按钮 -->
    <view v-if="hasAddPermission" class="add-btn-fixed" @click="goAddBrand">
      <i class="ibonfont ibontianjia"></i> 新增品牌
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModel: false,
      loading_status: "noMore",
      keyWord: "",
      categoryData: [],
      brand_list: [],
      now_cate: 0,
      page: 1,
      pageSize: 10,
      pageTotal: 0,
      now_cate_tit: "",
      now_brand_tit: "",
      now_status_tit: "",
      detail_data: {},
      source: 0,
      hasAddPermission: true,
      loadingMore: false, // 新增：防止并发加载
    };
  },
  onLoad(options) {
    this.source = parseInt(options.source) || 0;
    // this.hasAddPermission = this.$auth && this.$auth("brand:add");
    this.getAllBrand();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getAllBrand();
  },
  onReachBottom() {
    console.log("reachBottom");
    this.scrollLoading();
  },
  methods: {
    selConfirm() {
      const brandSel = this.brand_list.filter((item) => item.checked);
      this.$u.api.prePage().brandSel = brandSel;
      uni.navigateBack();
    },
    editData(id) {
      this.showModel = false;
      this.goPage("/pagesB/goods/BrandAdd?id=" + id);
    },
    async updateBrand(row) {
      this.showModel = false;
      let title =
        row.enableStatus === 4
          ? "确定要启用该品牌吗？"
          : "确定要禁用该品牌吗？";
      uni.showModal({
        title: "提示",
        content: title,
        success: async (res) => {
          if (res.confirm) {
            const { err } = await this.$u.api.updateBrandStatus(row.id, {
              id: row.id,
              enableStatus: row.enableStatus === 5 ? 4 : 5,
            });
            if (err) return;
            this.$u.toast("操作成功");
            this.getAllBrand();
          }
        },
      });
    },
    async deleteBrand(id) {
      this.showModel = false;
      uni.showModal({
        title: "提示",
        content: "确定要删除该品牌吗",
        success: async (res) => {
          if (res.confirm) {
            const { err } = await this.$u.api.delBrand(id);
            if (err) return;
            this.$u.toast("删除成功");
            this.getAllBrand();
          }
        },
      });
    },
    lookDetail(item) {
      if (this.source === 2) {
        item.checked = !item.checked;
        return;
      }
      if (this.source === 1) {
        this.$u.api.prePage().brandSel = item;
        uni.navigateBack();
        return;
      }
      this.detail_data = item;
      this.showModel = true;
    },
    closeDetail() {
      this.showModel = false;
    },
    scrollLoading() {
      // 防止多次触发，且保证 loadingMore 标志正确
      if (this.loadingMore) return;
      if (this.page < Math.ceil(this.pageTotal / this.pageSize)) {
        this.page += 1;
        this.getAllBrand(true);
      }
    },
    async getAllBrand(append = false) {
      if (this.loadingMore) return;
      this.loading_status = "loading";
      this.loadingMore = true;
      const { err, data, pageTotal } = await this.$u.api.getAllBrand({
        keyword: this.keyWord,
        page: this.page,
        pageSize: this.pageSize,
      });
      this.loading_status = "noMore";
      this.loadingMore = false;
      uni.stopPullDownRefresh();
      if (err) return;
      const cData = (data || []).map((item) => ({
        ...item,
        checked: false,
      }));
      if (this.page === 1 || !append) {
        this.brand_list = cData;
      } else {
        this.brand_list = this.brand_list.concat(cData);
      }
      this.pageTotal = pageTotal || 0;
      if (this.page >= Math.ceil(this.pageTotal / this.pageSize)) {
        this.loading_status = "noMore";
      } else {
        this.loading_status = "loading";
      }
    },
    searchData() {
      this.page = 1;
      this.getAllBrand();
    },
    clearKeyword() {
      this.keyWord = "";
      this.searchData();
    },
    goAddBrand() {
      this.goPage("/pagesB/goods/BrandAdd");
    },
  },
};
</script>

<style lang="scss" scoped>
.brand-manage-page {
  background: #f7f8fa;
  min-height: 100vh;
}
.top-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding-bottom: 10rpx;
  z-index: 10;
  .top-search {
    background: #f5f5f5;
    font-size: 28rpx;
    height: 60rpx;
    width: 92vw;
    margin: 0 auto;
    padding: 14rpx 0;
    border-radius: 12rpx;
    .icon-search {
      width: 32rpx;
      height: 32rpx;
      margin: 14rpx 18rpx 0;
      float: left;
      transform: translateY(-8rpx);
    }
    .icon-close {
      width: 36rpx;
      height: 36rpx;
      float: right;
      margin: 14rpx 18rpx 0;
      transform: translateY(-12rpx);
    }
    .top-input {
      height: 100%;
      line-height: 60rpx;
      float: left;
      width: calc(100% - 120rpx);
      font-size: 28rpx;
      background: transparent;
    }
  }
}
.container-view {
  padding-top: 80rpx;
  height: calc(100vh - 80rpx);
  background: #f7f8fa;
  .con-right {
    height: 100%;
    .goods-item {
      display: flex;
      align-items: flex-start;
      background: #fff;
      border-radius: 12rpx;
      margin: 18rpx 18rpx 0 18rpx;
      padding: 18rpx 0 18rpx 18rpx;
      box-shadow: 0 2rpx 8rpx #f0f0f0;
      .sel-view {
        margin-top: 60rpx;
        .ibonfont {
          font-size: 36rpx;
          padding-right: 18rpx;
          color: #999;
        }
        .ibonxuanze_xuanzhong {
          color: #fb5904;
        }
      }
      .goods-img {
        width: 120rpx;
        height: 120rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        margin-right: 18rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
      .goods-cont-right {
        flex: 1;
        .goods-tit {
          padding-bottom: 8rpx;
          font-size: 32rpx;
          font-weight: bold;
          width: 100%;
        }
        .goods-info {
          padding-bottom: 8rpx;
          font-size: 26rpx;
          color: #666;
          display: flex;
          .gi-label {
            width: 90rpx;
            color: #999;
          }
          .gi-value {
            flex: 1;
            &.status-on {
              color: #27ae60;
            }
            &.status-off {
              color: #e74c3c;
            }
          }
        }
      }
    }
  }
}
.load-more {
  text-align: center;
  color: #888;
  font-size: 26rpx;
  padding: 24rpx 0;
}
.custom-popup-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.custom-popup {
  width: 100vw;
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 80vh;
  overflow-y: auto;
  animation: popupIn 0.2s;
}
@keyframes popupIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.brandDetail {
  padding: 0 32rpx;
  .brand-top-view {
    padding: 32rpx 0;
    display: flex;
    align-items: center;
    .brand-logo {
      width: 100rpx;
      height: 100rpx;
      margin-right: 24rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }
    .brand-info {
      .brand-name {
        font-size: 32rpx;
        padding-bottom: 12rpx;
        font-weight: bold;
      }
      .brand-info-i {
        font-size: 26rpx;
        color: #888;
      }
    }
  }
  .detail-info {
    .detail-li {
      border-top: 1rpx solid #eee;
      padding: 18rpx 0;
      display: flex;
      align-items: center;
      .detail-label {
        width: 120rpx;
        color: #888;
      }
      .detail-value {
        flex: 1;
        font-size: 28rpx;
        &.status-on {
          color: #27ae60;
        }
        &.status-off {
          color: #e74c3c;
        }
        .tag-li {
          padding: 6rpx 16rpx;
          font-size: 24rpx;
          color: #fb5904;
          border: 1rpx solid #fb5904;
          border-radius: 4rpx;
          margin-top: 10rpx;
          margin-right: 10rpx;
          display: inline-block;
        }
      }
    }
  }
  .handel-view {
    display: flex;
    width: 100%;
    border-top: 1rpx solid #eee;
    padding: 18rpx 0;
    .btn-li {
      flex: 1;
      text-align: center;
      background: #fb5904;
      height: 60rpx;
      line-height: 60rpx;
      margin-right: 16rpx;
      color: #fff;
      border-radius: 8rpx;
      font-size: 28rpx;
      .ibonfont {
        margin-right: 10rpx;
      }
    }
    .btn-li:last-child {
      margin-right: 0;
    }
    .dis-btn {
      background: #ffb300;
    }
    .del-btn {
      background: #e74c3c;
    }
  }
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 24rpx 0;
  box-shadow: 0 -2rpx 8rpx #f0f0f0;
  z-index: 99;
}
.sub-btn {
  width: 92%;
  margin: 0 auto;
  background: #fb5904;
  color: #fff;
  text-align: center;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 34rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  border: none;
}
.add-btn-fixed {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  background: #fb5904;
  color: #fff;
  border-radius: 50rpx;
  padding: 18rpx 36rpx;
  font-size: 32rpx;
  box-shadow: 0 2rpx 8rpx #ccc;
  z-index: 100;
  display: flex;
  align-items: center;
  .ibonfont {
    font-size: 36rpx;
    margin-right: 10rpx;
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
